"use client";
import {
  PageContainer,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { Button, Card, Col, message, Row, Space } from "antd";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { RollbackOutlined } from "@ant-design/icons";
import {
  addPostApi,
  updatePostApi,
  getPostInfoApi,
} from "@/lib/api/system/post";
import { Post } from "@/lib/api/system/post.d";
import { getDeptTreeApi } from "@/lib/api/system/dept";
export default function Page() {
  const { type } = useParams();
  const router = useRouter();
  const params = useSearchParams();
  const postId = params.get("postId");

  const title = type === "add" ? "新增岗位" : "修改岗位";

  const { run: addPost, loading: addPostLoading } = useRequest(addPostApi, {
    manual: true,
    onSuccess: () => {
      message.success("新增成功");
      router.back();
    },
    onError: (error: any) => {
      message.error(error.msg);
    },
  });

  const { run: updatePost, loading: updatePostLoading } = useRequest(
    (params) => updatePostApi({ ...params, postId: postId }),
    {
      manual: true,
      onSuccess: () => {
        message.success("修改成功");
        router.back();
      },
      onError: (error: any) => {
        message.error(error.msg);
      },
    },
  );

  const extraProps =
    type !== "add"
      ? {
          request: async () => {
            const res = await getPostInfoApi(postId as string);
            return res.data;
          },
        }
      : {
          defaultFormValues: {
            status: "0",
          },
        };

  return (
    <PageContainer
      title={title}
      extra={
        <Button icon={<RollbackOutlined />} onClick={() => router.back()}>
          返回
        </Button>
      }
    >
      <Card>
        <ProForm
          layout="horizontal"
          submitter={{
            render: (_, dom) => {
              return (
                <Row>
                  <Col span={14} offset={4}>
                    <Space>{dom}</Space>
                  </Col>
                </Row>
              );
            },
            searchConfig: { submitText: "保存" },
          }}
          className="max-w-[800px] mx-auto my-10"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          loading={addPostLoading || updatePostLoading}
          onFinish={async (values: Post) => {
            if (type === "add") {
              await addPost(values);
            } else {
              await updatePost(values);
            }
          }}
          {...extraProps}
        >
          <ProFormText
            name="postName"
            label="岗位名称"
            required
            rules={[{ required: true, message: "请输入字典类型" }]}
          />
          <ProFormTreeSelect
            name="deptId"
            label="部门"
            key="id"
            fieldProps={{
              fieldNames: { label: "label", value: "id" },
            }}
            request={async () => {
              const res = await getDeptTreeApi();
              return res.data;
            }}
            required
            rules={[{ required: true, message: "请选择部门" }]}
          />
          <ProFormText
            name="postCode"
            label="岗位编码"
            rules={[{ required: true, message: "请输入岗位编码" }]}
          />
          <ProFormText name="postCategory" label="类别编码" />
          <ProFormDigit
            min={0}
            max={100}
            initialValue={1}
            fieldProps={{
              precision: 0,
            }}
            name="postSort"
            label="岗位排序"
            rules={[{ required: true, message: "请输入排序" }]}
          />
          <ProFormRadio.Group
            name="status"
            label="部门状态"
            initialValue="0"
            options={[
              { label: "正常", value: "0" },
              { label: "停用", value: "1" },
            ]}
          />
          <ProFormTextArea name="remark" label="备注" />
        </ProForm>
      </Card>
    </PageContainer>
  );
}
